<!--
 * @Author: mayijun
 * @Date: 2022-07-22 10:43:50
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-05 14:00:29
-->
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import { store } from '@/store';
import { useRoute } from 'vue-router';

const route = useRoute();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['update:visible', 'saveItem']);
const saveRef = ref();
const form = reactive({
  remark: ''
});

const dialogVisibles = computed({
  get: () => props.visible,
  set: (v) => emit('update:visible', v)
});
// 获取指标的中文文名称
const indexCnName = computed(() => {
  return store.state.metricsdevelop.metricsCnName;
});
// 获取指标的id
const indexId = computed(() => {
  return route.query.metricsId;
});

//提交保存
const handleBeforeOk = (done: any) => {
  saveRef.value.validate((valid: any) => {
    if (!valid) {
      done();
      emit('saveItem', form);
    } else {
      done(false);
    }
  });
};
const handleCancel = () => {
  dialogVisibles.value = false;
};
</script>
<template>
  <a-modal
    :visible="dialogVisibles"
    :title="props.title"
    class="save-Modal"
    @cancel="handleCancel"
    @before-ok="handleBeforeOk"
  >
    <a-form
      :model="form"
      ref="saveRef"
      :label-col-props="{ span: 4, offset: 0 }"
    >
      <a-form-item label="ID" :show-colon="true">{{ indexId }}</a-form-item>
      <a-form-item label="名称" :show-colon="true">{{
        indexCnName
      }}</a-form-item>
      <a-form-item
        field="remark"
        label="描述"
        :show-colon="true"
        :rules="[{ required: true, message: '请输入描述' }]"
      >
        <a-textarea v-model="form.remark" placeholder="请输入" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<style lang="scss">
.save-Modal {
  .arco-modal-body {
    padding: 0;
    padding-top: 18px;
  }
  .arco-form-item {
    margin-bottom: 18px;
    .arco-form-item-label-col {
      line-height: 22px;
    }
    .arco-form-item-wrapper-col {
      min-height: 22px;
    }
    .arco-form-item-content {
      min-height: 22px;
    }
  }
}
</style>